// 创建数据集
import React, { useState, useEffect }  from 'react';
import {
	Form,
	Input, 
	message,
	Modal,
	Select,
} from 'antd';
import { getConnectList, dataSetCreate, getSourceTables, dataSetReName } from 'src/services/DataManage';

interface Iprops {
	modalVisible:boolean
	data?:any
	folderId:any
	treeData:any
	onCreate:any
	closeModal:any
}

// eslint-disable-next-line react/display-name
export const CreateDataSet = React.forwardRef ( ( props: Iprops, formRef: any ) => {
	const [ resources, setResources ] = useState( [] );
	const [ tableData, setTableData ] = useState( [] );
	const [ isEdit, setIsEdit ] = useState( false );

	const [ form ] = Form.useForm();

	const handleCancle = () => {
		props.closeModal( false );
		form.resetFields();
	};
	
	
	const handleOk = () => {
		form.validateFields().then( value => {
			handleCreate( value );
			handleCancle();
		} ).catch( info => {
			message.warning( '请完善信息' );
		} );
	};

	// 创建/更新数据集
	const handleCreate = async ( data: any ) => {
		let param = { ...data };
		let res;
		if ( isEdit ) {
			res = await dataSetReName( { data: { id: props.data.id, toTableDesc: data.tableNameDesc, comments: data.comments } } );
		} else {
			res = await dataSetCreate( { data: param } );
		}
		
		if ( res.data.success ) {
			message.success( isEdit ? '更新数据集成功！' : '创建数据集成功！' );
			props.onCreate();
		}
	};

	// 获取数据源列表
	const getResources = async () => {
		let data = { 'page': 1, 'size': 1000, 'name': '', effect: 'ENABLE' };
		const info = await getConnectList( data );
		if ( info.data.success ) {
			setResources( info.data.data.rows );
		}
	};

	// 根据数据源id获取表列表
	const getTableData = async ( id ) => {
		const res = await getSourceTables( { data: id } );
		if ( res.data.success ) {
			setTableData( res.data.data );
		}
	};

	useEffect( () => {
		if ( !props.modalVisible ) return;

		if ( resources.length < 1 ) {
			getResources();
		}
		if ( props.data && props.data.id ) {
			setIsEdit( true );
			// 去掉名称结尾的.M/.D
			let tableDesc = props.data.tableDesc.replace( /\.M|\.D$/g, '' );
			form.setFieldsValue( { tableNameDesc: tableDesc, ...props.data } );
		} else {
			setIsEdit( false );
			if ( props.data && props.data.refSourceId ) {
				getTableData( props.data.refSourceId );
			}
		}
	}, [ props.modalVisible, props.data, resources, form ] );


	return (
		<Modal okText={'确定'} 
			visible={props.modalVisible}
			cancelText={'取消'} 
			onCancel={handleCancle}
			onOk={handleOk}
			title={ isEdit ? '更新数据集':'创建数据集' }>
			<Form form={form} ref={ formRef } labelCol={{ span: 4 }}>
				{
					!isEdit && (
						<Form.Item label="文件夹" name="folderId" initialValue={ props.folderId }
							rules={[ { required: true, message: '请选择文件夹' } ]}>
							<Select disabled={ isEdit } placeholder="请选择">
								{props.treeData.map( item => <Select.Option key={item.id} value={item.id}>{item.title}</Select.Option> )}
							</Select>
						</Form.Item>
					)
				}

				{
					!isEdit && (
						<Form.Item label="数据源" name="refSourceId"
							rules={[ { required: true, message: '请选择数据源' } ]}>
							<Select disabled={ !isEdit && props.data && props.data.refSourceId } placeholder="请选择" onChange={value => getTableData( value ) }>
								{resources.map( item => <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option> )}
							</Select>
						</Form.Item>
					)
				}

				{
					!isEdit && (
						<Form.Item label="选择表" name="tableName"
							rules={[ { required: true, message: '请选择表' } ]}>
							<Select disabled={ isEdit } showSearch placeholder="请选择">
								{tableData.map( ( item,index ) => <Select.Option key={index} value={item}>{item}</Select.Option> )}
							</Select>
						</Form.Item>
					)
				}
				
				<Form.Item label="表名称" name="tableNameDesc"
					rules={[ { required: true, message: '表别名不能为空' } ]}>
					<Input autoComplete="off" />
				</Form.Item>
				<Form.Item label="描述" name="comments">
					<Input autoComplete="off" />
				</Form.Item>
			</Form>
		</Modal>
	);
} );